<!--
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
-->
<template>
  <div class="p-bottom">
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in banner" :key="item.objectId">
        <img class="banner" :src="item.poster" alt="" />
      </van-swipe-item>
    </van-swipe>
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="good-list">
        <GoodItem v-for="item in list" :gdata="item" />
      </div>
    </van-list>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { prodGet, bannerGet } from "../api/prod";
import GoodItem from "../components/good-item.vue";
import { ProductType } from "../types/prod";
//banner渲染
interface BannerType {
  objectId: string;
  poster: string;
}
const banner = ref<BannerType[]>([]);
bannerGet().then((res) => {
  banner.value = res.data.results;
});

// 商品列表渲染

const list = ref<Array<ProductType>>([]);
let page = 1;
// 分页加载
const loading = ref<boolean>(false);
const finished = ref<boolean>(false);
const onLoad = () => {
  console.log("onLoad执行了");
  loading.value = true;
  prodGet(page).then((res) => {
    console.log(res);
    let { results } = res.data;
    if (results.length) {
      list.value = [...list.value, ...res.data.results];
      page++;
    } else {
      finished.value = true; //没有更多数据了
    }

    loading.value = false;
  });
};
</script>

<style scoped>
.good-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 2rem;
}
.banner {
  width: 100%;
  height: 220px;
}
.p-bottom {
  padding-bottom: 60px;
}
</style>
